AS3でグラフィカルプログラミング#2

#ActionScript

#RIA

石上慎太郎

2011.08.02

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

ActionScript3.0で図形を描画するための方法について解説していきます。

この記事の対象：FlashまたはFlexに触れたことがある方。
必要な開発環境：Flash, FlashBuilder, FlashDevelop等の、ActionScript3.0の記述と実行ができる環境。

前回は、Graphicsクラスのごく基本的な使い方を解説しました。今回は、グラデーションとビットマップを使用した塗りについて解説します。

グラデーション

グラデーション塗りの指定には、前回使用したbeginFillの代わりに、beginGradientFillを使用します。beginFillと比べて引数が多く機能が複雑なので、細かく説明します。

第一引数のtypeは、グラデーションの種類を指定します。使用できる値は以下の2つです。

GradientType.LINEAR : 一方向に色が変わっていくグラデーションです。
GradientType.RADIAL : 中心点から放射状に色が変わっていくグラデーションです。

GradientType.LINEAR

GradientType.RADIAL

第二引数のcolorsは色の配列です。グラデーションで使用する色を指定します。開始と終了だけでなく、途中の色も任意の数指定できます。

第三引数のratiosは、colorsで指定した色の分布比率を指定する、0~255の数値の配列です。colorsと同じ要素数が必要です。

第四引数のmatrixは、グラデーションの幅、高さ、角度、オフセットを指定するMatrixクラスです。Matrixクラスのリファレンスを見ると一見難解に見えますが、Matrixクラスには、グラデーション専用のメソッドcreateGradientBoxが用意してあるので、これを利用することで容易にMatrixの作成が可能です。第三引数のratiosは、このMatrixで指定した幅と高さの領域に対しての分布になります。

//描画用のShapeを作成します。
var shape:Shape = new Shape();
addChild(shape);
var g:Graphics = shape.graphics;

var width:int = 200;//幅
var height:int = 200;//高さ
var rotation:Number = Math.PI / 2;//回転
var offsetX:int = 0;//Xオフセット
var offsetY:int = 100;//Yオフセット

//Matrixを作成します。
var m:Matrix = new Matrix();
m.createGradientBox(width, height, rotation, offsetX, offsetY);

var colors:Array = [0x00FF00, 0xFFFFFF, 0x0000FF];//色
var alphas:Array = [1, 1, 1];//アルファ
var ratios:Array = [0x00, 0x33, 0xFF];//色分布比率

//グラデーション塗りを開始します。
g.beginGradientFill(GradientType.LINEAR, colors, alphas, ratios, m);
//x=0px,y=0px地点から幅400px,高さ400pxの矩形を描画します。
g.drawRect(0, 0, 400, 400);
//塗りを終了します。
g.endFill();

実行結果

グラデーションのMatrixを作成する場合に注意すべきことがあります。Matrixの高さと幅を同じにして正方形の領域にしなかった場合、角度を指定して斜めの線形グラデーションを描画すると、指定した角度と違った角度のグラデーションになってしまいます。また、放射状グラデーションの場合は、楕円になります。

幅400px、高さ200px、回転角45°で線形グラデーションを描画した結果

第五引数のspreadMethodは、グラデーションの繰り返し方を指定します。使用できる値は以下の3つです。

SpreadMethod.PAD : 繰り返し無しです。
SpreadMethod.REFRECT : 反転して繰り返します。
SpreadMethod.REPEAT : 単純に繰り返します。

SpreadMethod.PAD

SpreadMethod.REFRECT

SpreadMethod.REPEAT

第六引数のinterpolationMethodは、colorsで指定した色の間を補完する方法を指定しますが、通常はデフォルト値のInterpolationMethod.RGBで問題ありません。

第七引数のfocalPointRatioは、放射状グラデーションの焦点位置を指定します。球体に反射する光のような表現を描く時に有効です。線形グラデーションの場合には使用しません。

//描画用のShapeを作成します。
var shape:Shape = new Shape();
addChild(shape);
var g:Graphics = shape.graphics;

var width:int = 200;//幅
var height:int = 200;//高さ
var rotation:Number = Math.PI / 4 * 5;//回転
var offsetX:int = 0;//Xオフセット
var offsetY:int = 0;//Yオフセット

//Matrixを作成します。
var m:Matrix = new Matrix();
m.createGradientBox(width, height, rotation, offsetX, offsetY);

var colors:Array = [0xFFFFFF, 0x000000];//色
var alphas:Array = [1, 1];//アルファ
var ratios:Array = [0x00, 0xFF];//色分布比率
var focalPointRatio:Number = 0.5//焦点位置比率

//グラデーション塗りを開始します。
g.beginGradientFill(GradientType.RADIAL, colors, alphas, ratios, m, SpreadMethod.REPEAT, InterpolationMethod.RGB, focalPointRatio);
//x=100px,y=100px地点を中心に半径100pxの円を描画します。
g.drawCircle(100, 100, 100);
//塗りを終了します。
g.endFill();

実行結果

ビットマップ塗り

beginBitmapFillを使用すると、読み込んだビットマップや自分で描いたビットマップを塗りとして使うことができます。

第一引数のbitmapは、塗りに使用するBitmapDataです。引数名はbitmapですが、Bitmap型ではない事に注意してください。

第二引数のmatrixは、グラデーションの場合と同じくMatrix型ですが、こちらはグラデーションの場合とは異なり、塗りに使用するビットマップに対する変形を指定するMatrixです。x倍率、y倍率、角度、オフセットを指定します。MatrixクラスのcreateBoxメソッドを使用して作成しますが、変形させる必要がない場合はnullを指定します。

第三引数のrepeatは、塗りの中でビットマップを繰り返すかどうかを指定します。繰り返さない場合、ビットマップのエッジの色がビットマップの外側に適用されます。

第四引数のsmoothは、matrixでビットマップを拡大する場合に、スムージングするかどうかを指定します。trueにした場合、描画負荷が高くなります。

//ビットマップ作成用のShapeを作成します。
var shape:Shape = new Shape();
var g:Graphics = shape.graphics;

//ビットマップ化する図形を描きます。
g.beginFill(0x000000);
g.drawRect(0, 0, 4, 4);
g.drawRect(4, 4, 4, 4);
g.endFill();

//ビットマップを作成します。
var bmd:BitmapData = new BitmapData(shape.width, shape.height);
bmd.draw(shape);

//描画用のShapeを作成します。
shape = new Shape();
addChild(shape);
g = shape.graphics;

//ビットマップ塗りを開始します。
g.beginBitmapFill(bmd, null, true);
//x=0px,y=0px地点から幅200px,高さ100pxの楕円を描画します。
g.drawEllipse(0, 0, 200, 100);